@extends('WShop::layout')

@push('styles')
    <link href="{{asset(config('view.frontend.wap_login').'/css/mui.picker.css')}}" rel="stylesheet" />
    <link href="{{asset(config('view.frontend.wap_login').'/css/mui.poppicker.css')}}" rel="stylesheet" />
<style>
    .mui-user-xx .mui-input-row input {
        width: 75%;
    }
    .mui-user-xx .mui-input-row span {
        float: left;
        width: 25%;
        color: #333;
        padding: 8px 15px;
        background: #fff;
        margin-top: 1px;
    }
</style>
@endpush
@section('content')
    @component('WShop::public.header')
        @slot('page_title'){{$page_title}} @endslot
    @endcomponent
    <div class="mui-content mui-scroll-wrapper" id="pullrefresh" style="background: transparent;">
        <div class="mui-scroll">
            <div class="mui-table-view mui-table-view-chevron mui-bottom" style="background: transparent;">
                <div class="mui-user-xx">

                    <form method="post" action="{{url()->current()}}" >
                        {{csrf_field()}}

                        <div class="mui-input-row">
                            <span>昵称</span>
                            <input type="text"  placeholder="请输入您的昵称" name="nickname" value="{{$user->nickname ?? ''}}">
                        </div>

                        <div class="mui-input-row">
                            <span>银行</span>
                            <input type="text"   placeholder="请输入您的银行名称" name="bank_name" value="{{$user->info->bank_name?? ''}}">
                        </div>

                        <div class="mui-input-row">
                            <span>卡号</span>
                            <input type="text"   placeholder="请输入您的银行卡号" name="bank_card" value="{{$user->info->bank_card?? ''}}">
                        </div>

                        <div class="mui-input-row">
                            <span>微信</span>
                            <input type="text"   placeholder="请输入您的微信账号" name="weichat" value="{{$user->info->weichat?? ''}}">
                        </div>
                        <div class="mui-input-row">
                            <span>支付宝</span>
                            <input type="text"   placeholder="请输入您的支付宝账号" name="alipay" value="{{$user->info->alipay?? ''}}">
                        </div>



                        <div class="mui-user-xx-header bg-fff">
                            <div style="margin-bottom: 10px;">上传头像</div>
                            <a href="javascript:;">
                                @if($user->head_pic)
                                    <img src="{{$user->head_pic}}" width="45" id="preview_head_pic" />
                                @else
                                    <img src="{{asset(config('view.frontend.wap_login').'/images/tu43.png')}}" width="45" id="preview_head_pic" />
                                @endif

                                <input type="hidden" name="head_pic" id="head_pic" value="" />

                            </a>
                            <input type="file" class="mui-sc-pz" name="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="imgPreview(this,'head_pic')"  />

                        </div>

                        <div class="mui-user-xx-header bg-fff">
                            <div style="margin-bottom: 10px;">上传身份证正面</div>
                            <a href="javascript:;">
                                @if($user->info->ID_card_front)
                                    <img src="{{$user->info->ID_card_front}}" width="45" id="preview_ID_card_front" />
                                @else
                                    <img src="{{asset(config('view.frontend.wap_login').'/images/tu43.png')}}" width="45" id="preview_ID_card_front" />
                                @endif

                                <input type="hidden" name="ID_card_front" id="ID_card_front" value="" />

                            </a>
                            <input type="file" class="mui-sc-pz" name="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="imgPreview(this,'ID_card_front')"  />

                        </div>

                        <div class="mui-user-xx-header bg-fff">
                            <div style="margin-bottom: 10px;">上传身份证反面</div>
                            <a href="javascript:;">
                                @if($user->info->ID_card_back)
                                    <img src="{{$user->info->ID_card_back}}" width="45" id="preview_ID_card_back" />
                                @else
                                    <img src="{{asset(config('view.frontend.wap_login').'/images/tu43.png')}}" width="45" id="preview_ID_card_back" />
                                @endif

                                <input type="hidden" name="ID_card_back" id="ID_card_back" value="" />

                            </a>
                            <input type="file" class="mui-sc-pz" name="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="imgPreview(this,'ID_card_back')"  />

                        </div>

                        <div class="mui-user-xx-header bg-fff" >
                            <div style="margin-bottom: 10px;">电子签名</div>
                            <a href="javascript:;">
                                @if($user->qianming_pic)
                                    <img src="{{$user->qianming_pic}}" width="45" id="preview_qianming_pic" />
                                @else
                                    <img src="{{asset(config('view.frontend.wap_login').'/images/tu43.png')}}" width="45" id="preview_qianming_pic" />
                                @endif
                                <input type="hidden" name="qianming_pic" id="qianming_pic" value="" />

                            </a>
                            <button id="qianzi" type="button">签字</button>
                        </div>

                        <button type="button" class="mui-btns"> 提交</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div id="sheet3" class="mui-popover mui-popover-bottom mui-popover-action" style="display: block;">
        <div class="test">
            <div id="testEle" class="testInfo" style="border:1px solid #000;"></div>
        </div>
        <button id="undo" type="button" > 撤销</button>
        <button id="undoss" type="button" > 保存</button>
    </div>
    <div id="div"></div>
@endsection
@push('scripts')
    <script src="{{asset(config('view.frontend.wap_login').'/js/dzjm.min.js')}}"></script>
<script>

        //所有功能演示代码
        var m = new EleSign({
            ele: null
        });
        m.init();
        m.moutedEle(document.getElementById("testEle"));



        $("#undo").click(function(){
            m.undo();
        });
        $("#undoss").click(function(){
            var baseUrl = m.toPng();
            var img = document.getElementById('preview_qianming_pic');
            //图片路径设置为读取的图片
            img.src = baseUrl;
            console.log(baseUrl);

            var data={};
            data['imgField']='qianming_pic';
            data['qianming_pic']=baseUrl;
            data['group']='qianming_pic';
            data['_token']='{{csrf_token()}}';

            $.ajax({
                type: 'post',
                url: '{{route('f_Upload_uploadBase64')}}',
                dataType: 'json',
                data: data
            }).done(function (response) {
                if(response.status){
                    // console.log(response);
                    $('#qianming_pic').val(response.data.url);
                }else{
                    mui.toast(response.msg);
                }
            }).fail(function (XMLHttpRequest) {
                if (XMLHttpRequest.status == 422) {
                    mui.toast(XMLHttpRequest.responseJSON.msg);
                }else{
                    mui.toast('网络异常,请检查连接');
                }

            }).always(function () {
                layer.close(load);
            });

        });

    </script>
    <script>
        $("#qianzi").click(function(){
            mui('#sheet3').popover('toggle');
        });
        function imgPreview(fileDom,file_name) {

            //判断是否支持FileReader
            if(window.FileReader) {
                var reader = new FileReader();
            } else {
                alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
            }
            //获取文件
            var file = fileDom.files[0];
            var imageType = /^image\//;
            //是否是图片
            if(!imageType.test(file.type)) {
                mui.alert("请选择图片！");
                return;
            }
            //读取完成
            reader.onload = function(e) {
                //获取图片dom
                var img = document.getElementById('preview_'+file_name);
                var pingzheng= document.getElementById("pingzheng")
                //图片路径设置为读取的图片
                img.src = e.target.result;
                var load =  layer.open({type: 2});
                var data={};
                data['imgField']=file_name;
                data[file_name]=e.target.result;
                data['group']=file_name=='head_pic'?'head_img':file_name;
                data['_token']='{{csrf_token()}}';

                $.ajax({
                    type: 'post',
                    url: '{{route('f_Upload_uploadBase64')}}',
                    dataType: 'json',
                    data: data
                }).done(function (response) {
                    if(response.status){
                       // console.log(response);
                        $('#'+file_name).val(response.data.url);
                    }else{
                        mui.toast(response.msg);
                    }
                }).fail(function (XMLHttpRequest) {
                    if (XMLHttpRequest.status == 422) {
                        mui.toast(XMLHttpRequest.responseJSON.msg);
                    }else{
                        mui.toast('网络异常,请检查连接');
                    }

                }).always(function () {
                    layer.close(load);
                });
            };
            reader.readAsDataURL(file);
        }

        $('.mui-btns')[0].addEventListener('tap',function(){
            var form = $(this).parents('form');
            $.ajax({
                type: 'post',
                url: $(form).attr('action'),
                dataType: 'json',
                data: $(form).serialize()
            }).done(function (response) {
                if(response.status){
                    mui.toast(response.msg);
                    setTimeout(function () {
                        location.href = response.url;
                    }, 2000);
                }else{
                    mui.toast(response.msg);
                }
            }).fail(function (XMLHttpRequest) {
                if (XMLHttpRequest.status == 422) {
                    mui.toast(XMLHttpRequest.responseJSON.msg);
                }else{
                    mui.toast('网络异常,请检查连接');
                }

            }).always(function () {

            });
        })
    </script>
@endpush